import { defineComponent } from 'vue';
import { ElImage, ElTooltip } from 'element-plus';
import MButton from '../MButton';
import './index.less';

export default defineComponent({
  name: 'SearchRow',
  props: {
    data: {
      default: {}
    },
    border: {
      default: true
    },
    datekey:{
      default:'month'
    }
  },
  emits: ['search'],
  setup(props: any, { emit }) {
    
    const showLabel = (key: string, list: any[]) => {
      const value = props.data.search[key];
      if (list) {
        if (list[0].label) {          
          const item = list.find((_item: AnyObject) => value == _item.value);
          return item?.label || "";
        } else {
          return value;
        }
      } else {        
        return value;
      }
    };
    return () => (
      <>
        <div class="row flex-start">
          {props.data.list?.map((item: AnyObject) => (
            <MButton
              onSearch={() => emit('search')}
              data={props.data}
              placeholder={item.placeholder}
              content={showLabel(item.key, item.list)}
              datekey={props.datekey}
              // function={item.type == 'list' ? 'dialog' : item.type}
              type={item.type}
              icon={item.icon}
              border={props.border}
            />
          ))}
        </div>
      </>
    );
  }
});
